<template>
  <section :style="getCssBorderRadius(borderRadius)" class="c-text-hidden" :class="[isPrefecture ? 'c-pt30' : (item.isShowWhitelace && item.orderBy != 2 ? 'c-ph24 c-pv30' : (item.isShowWhitelace && item.orderBy == 2 ? 'c-pv30' : '')), !isSetPageBackground ? 'c-bg-white' : '']">
    <template v-if="[1,2].includes(item.orderBy) && item.items.length > 1" class="c-p">
      <swiper @click.native="clickSwiper" :options="swiperOption" class="c-p c-text-hidden" :style="getBorderRadius(borderRadius, '0.4rem')" :class="['mySwiper' + item.orderBy]" :ref="'mySwiper' + item.orderBy">
        <swiper-slide v-for="(it, indexIt) in item.items" :key="indexIt" class="c-w100 c-h c-p">
          <img class="c-w100 c-h c-object-fit-cover" :src="$addXossFilter(it.image)" :data-index="indexIt" :data-nid="it.navId" :data-url="it.url" />
          <div class="c-pa c-p-t0 c-p-r8 c-p-t8 c-pz10 c-flex-row c-aligni-center">
            <div class="c-fc-white c-fs18 c-translucent-balck40 c-hh32 c-lh32 c-ph12 c-br16">
              {{indexIt + 1}}/{{item.items.length}}
            </div>
          </div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </template>
    <template v-if="item.orderBy == 3 && item.items.length > 1">
      <div class="c-p">
        <div class="threeSmall c-pa c-p-r0 c-p-t0 c-p-b0 c-m-auto0 c-w100 c-h">
          <img class="c-object-fit-cover c-w100 c-h c-pa" :style="getBorderRadius(borderRadius, '0.4rem')" :src="$addXossFilter(threeItem.image)" v-for="(threeItem, i) in threeItems" :key="i">
        </div>
        <swiper @click.native="clickSwiper" :options="swiperOption" :style="getBorderRadius(borderRadius, '0.4rem')" class="c-p c-text-hidden mySwiper3" :class="item.isShowWhitelace ? 'c-hh280' : 'c-hh304'" :id="'mySwiper' + swiperIndex" :ref="'mySwiper' + item.orderBy">
          <swiper-slide v-for="(it, indexIt) in item.items" :key="indexIt" class="c-w100 c-h c-p">
            <img class="c-w100 c-h c-object-fit-cover" :src="$addXossFilter(it.image)" :data-index="indexIt" :data-nid="it.navId" :data-url="it.url" />
            <div class="c-pa c-p-t0 c-p-r8 c-p-t8 c-pz10 c-flex-row c-aligni-center">
              <div class="c-fc-white c-fs18 c-translucent-balck40 c-hh32 c-lh32 c-ph12 c-br16">
                {{indexIt + 1}}/{{item.items.length}}
              </div>
            </div>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
    </template>
    <template v-if="item.orderBy == 4 && item.items.length > 1">
      <div class="c-p c-pb20" :class="item.isShowWhitelace ? 'c-hh316' : 'c-hh340'">
        <swiper @click.native="clickSwiper" :options="swiperOptionSmall" ref="swiperSmall" :style="getBorderRadius(borderRadius, '0.4rem')" class="c-pa c-p-l0 c-p-r0 c-mlr-auto lunbo4 swiper-no-swiping">
          <swiper-slide v-for="(it, indexIt) in item.items" :key="indexIt" class="c-h c-text-hidden" :style="getBorderRadius(borderRadius, '0.4rem')">
            <img class="c-w100 c-h c-object-fit-cover" :style="getBorderRadius(borderRadius, '0.4rem')" :src="$addXossFilter(it.image)" :data-index="indexIt" :data-nid="it.navId" :data-url="it.url" />
          </swiper-slide>
        </swiper>
        <swiper @click.native="clickSwiper" :options="swiperOption" class="c-p c-h mySwiper4" :style="getBorderRadius(borderRadius, '0.4rem')" ref="mySwiper4">
          <swiper-slide v-for="(it, indexIt) in item.items" :key="indexIt" class="c-h c-text-hidden c-p" :style="getBorderRadius(borderRadius, '0.4rem')">
            <img class="c-w100 c-h c-object-fit-cover" :style="getBorderRadius(borderRadius, '0.4rem')" :src="$addXossFilter(it.image)" :data-index="indexIt" :data-nid="it.navId" :data-url="it.url" />
            <div class="c-pa c-p-t0 c-p-r8 c-p-t8 c-pz10 c-flex-row c-aligni-center">
              <div class="c-fc-white c-fs18 c-translucent-balck40 c-hh32 c-lh32 c-ph12 c-br16">
                {{indexIt + 1}}/{{item.items.length}}
              </div>
            </div>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
    </template>
    <div v-if="(item.modelType == 2 || item.modelType == 59) && item.enableModule == 1 && item.items && item.items.length == 1" class="c-p">
      <img class="c-w100 c-maxw640" :style="getBorderRadius(borderRadius, '0.4rem')" :src="$addXossFilter(item.items[0].image)" @click="clickSwiperItem(item.items[0])" />
    </div>
    <open-modal :openModal='showLaunchWeapp' @closeModal='showLaunchWeapp = false'>
      <div class="c-w100 c-bg-white c-pv60 c-ph80 c-mt40 c-br-tl20 c-br-tr20 c-flex-column c-flex-center">
        <img class="c-hh200 c-ww200 c-brp50" :src="companyLogo" />
        <div class="c-fw-b c-fs32 c-mt40 c-textAlign-c">{{companyName}}</div>
        <div class="contact c-flex-row c-flex-center c-mt40 theme-bg c-p">
          <span class="c-fs28 c-fc-white">立即跳转</span>
          <wx-open-launch-weapp
            :id="'launchBtn'"
            :appId="appID"
            :path="wechatUrl"
            class="c-w100 c-h c-text-hidden c-pa c-p-t0 c-p-l0"
            @click='showLaunchWeapp = false'
            @error="handleErrorFn"
            @launch="handleLaunch"
            @ready="handleReady"
          >
            <script type="text/wxtag-template">
              <style>.masker {width: 100%;height: 40px;opacity: 0}</style>
              <span class="masker">立即跳转</span>
            </script>
          </wx-open-launch-weapp>
        </div>
      </div>
    </open-modal>
  </section>
</template>
<script>
import { custIndex } from "@/mixin/custIndex.js";
import { customStyle } from '@/utils/customStyle.js'
import { utilJs } from "@/utils/common.js";
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import OpenModal from "@/components/templates/common/openModal.vue";
import 'swiper/dist/css/swiper.css';
export default {
  mixins: [custIndex, customStyle],
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      },
    },
    pageName: {//首页INDEX 预览页PREVIEW_INDEX 微页面MICRO_PAGE
      type: String,
      default: "INDEX"
    },
    upgradeMemberJump: {
      type: String,
      default: ''
    },
    swiperIndex: {
      type: Number,
      default: ''
    },
    isPrefecture: {
      type: Boolean,
      default: false
    }
  },
  components: {
    swiper,
    swiperSlide,
    OpenModal
  },
  data() {
    return {
      swiperOption: {},
      isShowAddTeacher: false,
      navMap: global.navMap,
      threeItems: [], // 第三版面后面的图片显示
      swiperOptionSmall: {}, //第四版面动态切换小轮播
      isWeiXin: false,
      companyLogo: localStorage.getItem("shareLogo") || '',
      companyName: window.localStorage.getItem("companyName") || '',
      showLaunchWeapp: false,
      wechatUrl: '',
      appID: '',
      isSetPageBackground: sessionStorage.getItem("isSetPageBackground") || 0
    };
  },
  watch: {
  },
  computed: {
    borderRadius() {
      return this.item.styleParam && this.item.styleParam.borderRadius ? this.item.styleParam.borderRadius : null
    },
    getCssBorderRadius() {
      return function(borderRadius) {
        return borderRadius ? `--borderRadius: ${borderRadius.custom == 1 ? 0 : borderRadius.size * (320 / 375 / 20)}rem` : ''
      }
    },
  },
  created() {
    let that = this;
    switch (that.item.orderBy) {
      case 1:
        that.swiperOption = {
          // pagination: {
          //   el: '.swiper-pagination',
          // },
          loop: true,
          speed: 400,
          autoplay: {
            disableOnInteraction: false,
          },
          autoHeight: true,
          updateOnImagesReady: true,
          observer: true,
        }
        break;
      case 2:
        that.swiperOption = {
          slidesPerView: 3,
          spaceBetween: 10,
          centeredSlides: true,
          // pagination: {
          //   el: '.swiper-pagination',
          // },
          loop: true,
          speed: 400,
          autoplay: {
            disableOnInteraction: false,
          },
          updateOnImagesReady: true,
          observer: true,
        }
        break;
      case 3:
        that.swiperOption = {
          speed: 400,
          loop: true,
          autoplay: {
            disableOnInteraction: false,
          },
          // pagination: {
          //   el: '.swiper-pagination',
          // },
          updateOnImagesReady: true,
          observer: true,
          watchSlidesProgress: true, //查看slide的progress
          resistanceRatio: 0, //禁止边缘移动
          on: {
            init: function () {
              // 初始化轮播图右边三张小图片
              that.$nextTick(() => {
                let active = document.querySelector('#mySwiper' + that.swiperIndex).getElementsByClassName('swiper-slide-active')[0].getAttribute('data-swiper-slide-index');
                active = active * 1;
                that.threeItems = [];
                for (let i = 0; i < 4; i++) {
                  if (that.item.items[i] && active != i) {
                    that.threeItems.push(that.item.items[i]);
                  }
                }
              })
            },
            slideChange: function () {
              that.$nextTick(() => {
                let active = document.querySelector('#mySwiper' + that.swiperIndex).getElementsByClassName('swiper-slide-active')[0].getAttribute('data-swiper-slide-index');
                active = active * 1;
                that.threeItems = [];
                // 切换轮播图带动右边三张小图片切换
                if (active == (that.item.items.length - 1)) {
                  for (let i = 0; i < 3; i++) {
                    if (that.item.items[i] && active != i) {
                      that.threeItems.push(that.item.items[i]);
                    }
                  }
                } else if (active < (that.item.items.length - 1)) {
                  for (let i = (active + 1); i < (that.item.items.length); i++) {
                    that.threeItems.push(that.item.items[i]);
                    if (that.threeItems.length == 3) {
                      break;
                    }
                  }
                  // 当轮播图大于等于3张的时候，看右边图片是否按顺序补全了，没有补全则从第一张图片开始补全
                  if (that.threeItems.length < 3 && that.item.items.length >= 3) {
                    let dif = 3 - that.threeItems.length;
                    for (let i = 0; i < dif; i++) {
                      if (active != i) {
                        that.threeItems.push(that.item.items[i]);
                      }
                    }
                  }
                }
              })
            },
          }
        }
        break;
      case 4:
        that.swiperOption = {
          direction: 'vertical',
          effect: 'flip',
          // pagination: {
          //   el: '.swiper-pagination',
          // },
          loop: true,
          speed: 450,
          autoplay: {
            disableOnInteraction: false,
          },
          updateOnImagesReady: true,
          observer: true,
          on: {
            slideChange: function () {
              let swiper = that.$refs.mySwiper4.swiper;
              let swiperSmall = that.$refs.swiperSmall.swiper;
              let i = swiper.activeIndex;
              if (i < (that.item.items.length + 1)) {
                swiperSmall.slideTo(i + 1, 600, false);
              } else if (i >= (that.item.items.length + 1)) {
                if (i == (that.item.items.length + 1)) {
                  swiperSmall.slideTo(2, 600, false);
                } else {
                  let dif = i - that.item.items.length;
                  swiperSmall.slideTo(0 + dif, 600, false);
                }
              }
            },
          }
        }
        that.swiperOptionSmall = {
          direction: 'vertical',
          effect: 'flip',
          flipEffect: {
            slideShadows: false,
          },
          loop: true,
          speed: 600,
          autoplay: true,
          initialSlide: 1,
          autoplayDisableOnInteraction: false,
        }
        break;
    }
  },
  mounted() {
    this.isWeiXin = utilJs.isWeiXin();
    this.showLaunchWeapp = false;
  },
  methods: {
    handleLaunch(e) {
      console.log('handleLaunch---', e)
    },
    handleErrorFn(e) {
      this.$showCjToast({
        text: e.errMsg || '无法打开小程序，请升级微信版本',
        type: "warn",
        time: 1500
      })
    },
    handleReady(e) {
      console.log('handleReady---', e)
    },
    clickSwiper(e) {
      console.log('*****clickSwiper***', e)
      let index = e.srcElement.dataset.index;
      let info = this.item.items[index];
      this.clickSwiperItem(info)
    },
    // 通常模块点击跳转
    clickSwiperItem(data) {
      if (this.pageName == 'PREVIEW_INDEX') {
        return;
      }
      data.pageName = this.pageName;
      data.upgradeMemberJump = this.upgradeMemberJump;
      if (data.navId == "linkToMiniProgram") {
        utilJs.checkWxApp(); // 再次调用是为了跳转小程序返回后避免小程序环境值判断错误
        this.$nextTick(() => {
          // 微信需要判断是否是小程序环境 h5跳转采用组件跳转 小程序跳转使用跳转到小程序中间页面再点击跳转到其他小程序
          if (localStorage.getItem('isWxApp')) {
            let query = data.info.appID ? `?appId=${data.info.appID}&path=${encodeURIComponent(JSON.stringify(data.info.wechatUrl))}` : `?shortLink=${encodeURIComponent(data.info.wechatUrl)}`;
            utilJs.miniProgramGoTo('push', '/pages/home/goWxApp/index' + query);
          } else {
            if (!data.info || (data.info && !data.info.appID)) return
            this.showLaunchWeapp = true;
            this.appID = data.info.appID;
            this.wechatUrl = data.info.wechatUrl;
          }
        })
      }
      this.commonModuleRouterPush(data)
    },
  },
};
</script>

<style scoped lang="scss">
.c-hh340 {
  height: 8.5rem;
}
.c-hh304 {
  height: 7.6rem;
}
.c-hh280 {
  height: 7rem;
}
.c-hh316 {
  height: 7.9rem;
}
.mySwiper2 {
  height: 7rem;
}
.mySwiper1 .swiper-pagination-bullet {
  width: 0.8rem;
  height: 0.15rem;
  background: #fff;
  opacity: 0.5;
  border-radius: 0.05rem;
}
.mySwiper2 {
  margin-left: -85%;
  margin-right: -85%;
}
.mySwiper2 .swiper-slide {
  border-radius: var(--borderRadius) !important;
  overflow: hidden;
}
.mySwiper2 .swiper-pagination-bullet, .mySwiper3 .swiper-pagination-bullet, .mySwiper4 .swiper-pagination-bullet {
  background: #fff;
}
.mySwiper3 {
  margin-right: 0.7rem;
  z-index: 10;
}
.threeSmall img:nth-child(1) {
  -webkit-transform: scale(0.97);
  transform: scale(0.97);
  z-index: 3;
  margin-left: -1.4%;
}
.threeSmall img:nth-child(2) {
  -webkit-transform: scale(0.94);
  transform: scale(0.94);
  z-index: 2;
  margin-left: 1.6%;
}
.threeSmall img:nth-child(3) {
  -webkit-transform: scale(0.91);
  transform: scale(0.91);
  z-index: 1;
  margin-left: 4.5%;
}
.mySwiper3 .swiper-pagination {
  left: auto;
  right: 1rem;
  width: auto;
}
.mySwiper4 {
  z-index: 10;
}
.mySwiper4 .swiper-pagination {
  top: auto;
  bottom: 1rem;
  height: auto;
  transform: translate3d(0, 0, 0);
}
.lunbo4 {
  width: 95%;
  height: 95%;
  bottom: 0;
  position: absolute;
}
/deep/ .swiper-pagination-bullet-active {
  background: var(--mb7color) !important;
}
.contact {
  width: 240px;
  height: 40px;
  background: #297AFF;
  border-radius: 20px;
  color: #FFFFFF;
}
</style>